<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" label-width="100px" inline>
      <el-row :gutter="10">
        <el-col :span="21">
          <el-form-item label="店铺名称">
            <el-input v-model.trim="queryParams.cusname" clearable placeholder="请输入店铺名称" style="width: 280px;"></el-input>
          </el-form-item>
          <el-form-item label="店铺账号">
            <el-input v-model.trim="queryParams.account" clearable placeholder="请输入店铺账号" style="width: 280px;"></el-input>
          </el-form-item>
          <el-form-item label="企业群">
            <el-input v-model.trim="queryParams.wechatGroup" clearable placeholder="请输入企业群名称" style="width: 280px;"></el-input>
          </el-form-item>
          <el-form-item label="店铺状态">
            <el-select v-model="queryParams.operStatus" clearable placeholder="请选择店铺状态" style="width: 280px;">
              <el-option
                v-for="status in statusOptions"
                :key="status.dictValue"
                :label="status.dictLabel"
                :value="status.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="操作日期">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 280px"></el-date-picker>
          </el-form-item>
          <el-form-item label="服务到期日">
            <el-date-picker
              v-model="service_dateRange"
              type="daterange"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 280px"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
        </el-col>
      </el-row>
    </el-form>

    <el-row :gutter="10" style="margin-bottom:10px">
      <el-col :span="1.5">
        <el-button type="primary" size="mini" icon="el-icon-plus" @click="handleAddCustom">新增客户</el-button>
      </el-col>
<!--      <el-col :span="1.5">-->
<!--        <el-button type="success" size="mini" icon="el-icon-user" :disabled="multiple" @click="handleAssign">分配运营人员</el-button>-->
<!--      </el-col>-->
      <el-col :span="1.5">
        <el-button type="success" size="mini" icon="el-icon-user" :disabled="multiple" @click="handleTransfer">转交店铺</el-button>
      </el-col>
<!--      <el-col :span="1.5">-->
<!--        <el-button type="warning" size="mini" icon="el-icon-user" @click="handleImport">导入</el-button>-->
<!--      </el-col>-->
<!--      <el-col :span="1.5">-->
<!--        <el-button type="warning" size="mini" icon="el-icon-user" @click="handleExport">导出</el-button>-->
<!--      </el-col>-->
    </el-row>

    <el-table v-loading="loading" :data="shopList" ref="htglTable" @selection-change="handleSelectionChange" border>
      <el-table-column type="selection" width="55" align="center" fixed></el-table-column>
      <el-table-column label="店铺名称" header-align="center" align="left" prop="cusname" width="260" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column label="旺旺号" header-align="center" align="left" prop="aliww" width="180" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column label="店铺账号" header-align="center" align="left" prop="account" width="220" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column label="微信群" header-align="center" align="left" prop="wechatGroup" width="260" :show-overflow-tooltip="true"></el-table-column>
<!--      <el-table-column label="服务开始日期" header-align="center" align="center" prop="serviceStartDate" :show-overflow-tooltip="true"></el-table-column>-->
<!--      <el-table-column label="服务结束日期" header-align="center" align="center" prop="serviceEndDate" :show-overflow-tooltip="true"></el-table-column>-->
      <el-table-column label="服务到期日" header-align="center" align="center" prop="endDate" width="120" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column label="开始操作日期" header-align="center" align="center" prop="operStartDate" width="120" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column label="流失/暂停日期" header-align="center" align="center" prop="operEndDate" width="120" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column label="店铺状态" header-align="center" align="center" prop="operStatus" width="130" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <el-tag type="info" v-if="scope.row.operStatus === '0'">未开始</el-tag>
          <el-tag type="success" v-if="scope.row.operStatus === '1'">操作中</el-tag>
          <el-tag type="danger" v-if="scope.row.operStatus === '2'">已流失</el-tag>
          <el-tag type="info" v-if="scope.row.operStatus === '3'">已暂停</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="left" header-align="center" min-width="120" fixed="right" class-name="small-padding">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleEdit(scope.row)"
          >修改</el-button>
<!--          <el-button-->
<!--            v-if="scope.row.operStatus=='0'"-->
<!--            size="mini"-->
<!--            type="text"-->
<!--            icon="el-icon-delete"-->
<!--            @click="handleSingleDel(scope.row)"-->
<!--          >删除</el-button>-->
          <el-button
            v-if="scope.row.operStatus=='0' || scope.row.operStatus == '3'"
            size="mini"
            type="text"
            icon="el-icon-video-play"
            @click="handleStartServ(scope.row)"
          >开始</el-button>
          <el-button
            v-if="scope.row.operStatus=='1'"
            size="mini"
            type="text"
            icon="el-icon-finished"
            @click="handleLostServ(scope.row)"
          >流失</el-button>
          <el-button
            v-if="scope.row.operStatus=='1'"
            size="mini"
            type="text"
            icon="el-icon-video-pause"
            @click="handlePauseServ(scope.row)"
          >暂停</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 新增/编辑 -->
    <el-dialog :title="title" :visible.sync="showAddOrEditDialog" v-loading="loading" width="920px" append-to-body>
      <el-form :model="shopForm" ref="shopForm" :rules="shopFormRules" label-width="100px" style="margin-left: 20px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="店铺名称" prop="cusname">
              <el-input v-model="shopForm.cusname" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="旺旺号" prop="aliww">
              <el-input v-model="shopForm.aliww" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="店铺网址" prop="shopUrl">
              <el-input v-model.trim="shopForm.shopUrl" placeholder="请填写店铺网址" clearable style="width: 760px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="店铺账号" prop="account">
              <el-input v-model="shopForm.account" placeholder="请填写店铺账号" clearable style="width: 320px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="店铺密码" prop="password">
              <el-input :type="passwordInputType" v-model="shopForm.password" placeholder="请填写店铺密码" style="width: 330px">
                <i slot="suffix" class="el-icon-view" @click="showPwd2"></i>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="企业群" prop="wechatGroup">
              <el-input v-model.trim="shopForm.wechatGroup" placeholder="请填写企业群名称" clearable ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" v-prevent-re-click>确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 分配运营人员 -->
    <el-dialog :title="title" :visible.sync="showAssignOperator" width="920px" append-to-body>
      <el-form :model="assignForm" ref="assignForm" style="margin-left: 20px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="运营人员" prop="operators">
              <el-cascader
                v-model="assignForm.operators"
                :options="userOptions"
                :props="props"
                :normalizer="user_normalizer"
                filterable
                style="width: 87%"></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAssignOperatorForm" v-prevent-re-click>确 定</el-button>
        <el-button @click="cancelAssignOperatorForm">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 转交店铺 -->
    <el-dialog :title="title" :visible.sync="showTransferOperator" width="920px" append-to-body>
      <el-form :model="transferForm" ref="transferForm" style="margin-left: 20px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="运营人员" prop="operators">
              <el-cascader
                v-model="transferForm.operators"
                :options="userOptions"
                :props="props"
                :normalizer="user_normalizer"
                filterable
                style="width: 87%"></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitTransferOperatorForm" v-prevent-re-click>确 定</el-button>
        <el-button @click="cancelTransferOperatorForm">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 导入 -->
    <el-dialog :title="title" :visible.sync="showImport" width="450px" append-to-body>
      <div style="margin-left: 20px">
        <el-upload
          ref="importUpload"
          class="upload-demo"
          drag
          action=""
          accept=".xls,.xlsx"
          :multiple="importMultiple"
          :limit="importLimit"
          :file-list="importFileList"
          :http-request="handleImportExcel"
          :on-remove="handleRemoveImportFile"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" style="margin-top: 20px" slot="tip">只能上传.xls/.xlsx文件</div>
        </el-upload>
        <div class="el-upload__tip" style="color: #76BEFF;cursor: pointer;margin-top: 10px;margin-bottom: 20px" @click="downLoadExcel">下载模板</div>
        <div v-if="importChargeError.length > 0" style="margin-top: 20px">
          <h3>错误信息：</h3>
          <p v-for="item in importChargeError" style="font-size: 12px; color: red">{{item}}</p>
        </div>
        <el-row :gutter="10">
          <el-col :span="23" style="text-align: right;margin-top: 20px">
            <el-button @click="handleCloseImportWindow">取消</el-button>
            <el-button type="primary" @click="handleSubmitImportForm" v-preventReClick>确定</el-button>
          </el-col>
        </el-row>
      </div>
    </el-dialog>

    <!-- 开始/流失/暂停 -->
    <el-dialog :title="title" :visible.sync="showChangeStatus" width="400px" append-to-body style="margin-left: 20px">
      <el-form :model="changeStatusForm" ref="changeStatusForm">
        <el-form-item label="开始操作日期" prop="operStartDate" v-show="title=='开始操作'">
          <el-date-picker
            v-model="changeStatusForm.operStartDate"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="请选择开始操作日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="流失日期" prop="operEndDate" v-show="title=='店铺流失'">
          <el-date-picker
            v-model="changeStatusForm.operEndDate"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="请选择店铺流失日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="暂停日期" prop="operEndDate" v-show="title=='店铺暂停'">
          <el-date-picker
            v-model="changeStatusForm.operEndDate"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="请选择店铺暂停日期"></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitChangeStatusForm" v-prevent-re-click>确 定</el-button>
        <el-button @click="cancelChangeStatusForm">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 新增客户 -->
    <addcustom
      :dialogVisble="showAddCustomDialog"
      title="创建客户"
      menu="shop"
      :active="active"
      @closeAddCustomDialog="closeAddCustomDialog"></addcustom>

    <!-- 编辑客户 -->
    <editcustom
      :dialogVisble="showEditCustomDialog"
      title="修改客户"
      menu="shop"
      :data-model="customForm"
      :active="active"
      @closeEditCustomDialog="closeEditCustomDialog"></editcustom>
  </div>

</template>

<script>

import { selectValidAgreementList } from '@/api/agreement/agreement'
import {
  getCustomAgreementList,
  getCustomInfo,
  selectMySignedCustomList,
  selectOperatorShop,
  signCustom, transferOperators, updateCustom, updateCustomOperStatus
} from '@/api/custom/custom'
import icon from 'element-ui/packages/icon'
import { selectAllDeptUser } from '@/api/system/user'
import Ar from 'element-ui/src/locale/lang/ar'
import { currentDate } from '@/utils/ruoyi'
import { mapGetters } from 'vuex'
import store from '@/store'
import { title } from '@/settings'
import addcustom from '@/views/shop/component/addcustom.vue'
import editcustom from '@/views/shop/component/editcustom.vue'

export default {
  name: 'Shop',
  components:{
    addcustom,
    editcustom
  },
  computed: {
    ...mapGetters([
      'userid',
      'name'
    ])
  },
  data() {
    return {
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 查询条件
      queryParams: {
        cusName: '',
        serviceType: '',
        name: '',
        account: '',
        wechatGroup: '',
        operStartDate: undefined,
        operEndDate: undefined,
        endDate1: undefined,
        endDate2: undefined,
        status: '',
        pageNum: 1,
        pageSize: 10
      },
      dateRange: [],
      service_dateRange: [],
      // 店铺列表
      shopList: [],
      // 服务类型选项
      serviceTypeOptions: [],
      // 店铺状态选项
      statusOptions: [],
      // 显示table加载动画
      loading: false,
      // 店铺列表
      customOptions: [],
      // 合同列表
      agreementList: [],
      // 店铺列表总数
      total: 0,
      // 弹窗标题
      title: '',
      // 是否显示弹窗
      showAddOrEditDialog: false,
      // 是否显示分配运营人员弹窗
      showAssignOperator: false,
      // 是否显示转交店铺弹窗
      showTransferOperator: false,
      // 是否显示导入弹窗
      showImport: false,
      // 是否显示更改状态窗口
      showChangeStatus: false,
      // 店铺表单
      shopForm: {
        id: '',
        cusname: '',
        aliww: '',
        shopUrl: '',
        account: '',
        password: '',
        wechatGroup: ''
      },
      active: 1,
      // 客户表单
      customForm: {},
      // 是否显示明文
      passwordInputType: 'password',
      shopFormRules: {
        account: [
          { required: true, message: '店铺账号不能为空', trigger: ['blur', 'change']}
        ],
        password: [
          { required: true, message: '店铺密码不能为空', trigger: ['blur', 'change']}
        ],
        wechatGroup: [
          { required: true, message: '微信群不能为空', trigger: ['blur', 'change']}
        ]
      },
      userOptions: [],
      props: { multiple: true },
      // 密码框是否显示密文
      flag: true,
      // 分配运营人员表单
      assignForm: {
        customIds: [],
        operators: []
      },
      // 转交店铺表单
      transferForm: {
        customIds: [],
        operators: []
      },
      // 导入文件
      importFileList: [],
      // 导入文件数量限制
      importLimit: 1,
      importMultiple: false,
      // 导入失败信息
      importChargeError: [],
      // 导入提交数据
      formData: new FormData(),
      // 导入进度
      importLoading: false,
      // 更改状态表单
      changeStatusForm: {
        id: '',
        operStartDate: undefined,
        operEndDate: undefined,
        operStatus: ''
      },
      // 显示创建客户弹窗
      showAddCustomDialog: false,
      // 显示修改客户弹窗
      showEditCustomDialog: false
    }
  },
  created() {
    // 服务类型
    this.getDicts("htlx").then(response => {
      this.serviceTypeOptions = response.data;
    }),
    // 店铺状态
    this.getDicts("shop_dpzt").then(response => {
      this.statusOptions = response.data;
    })
    // 获取部门人员树
    this.selectDeptUserTree()
    // 获取客户
    this.getCustomList()
    // 获取数据列表
    this.getList()
  },
  methods: {
    // 查询数据列表
    getList() {
      this.loading = true
      if(this.dateRange != null && this.dateRange.length === 2){
        this.queryParams.operStartDate = this.dateRange[0]
        this.queryParams.operEndDate = this.dateRange[1]
      }
      if(this.service_dateRange != null && this.service_dateRange.length === 2){
        this.queryParams.endDate1 = this.service_dateRange[0]
        this.queryParams.endDate2 = this.service_dateRange[1]
      }
      selectOperatorShop(this.queryParams).then(response => {
        this.shopList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 查询数据列表
    handleQuery() {
      this.getList()
    },
    // 勾选数据列表
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!=1
      this.multiple = !selection.length
    },
    // 创建客户
    handleAddCustom() {
      this.showAddCustomDialog = true
    },
    // 关闭修改客户弹窗
    closeEditCustomDialog(value) {
      this.showEditCustomDialog = false
      if(value) {
        this.getList()
      }
    },
    handleAssign() {
      this.title = '分配运营人员'
      this.showAssignOperator = true
      this.resetAssignForm()
      this.assignForm.customIds = this.ids
    },
    handleTransfer() {
      this.title = '转交店铺'
      this.showTransferOperator = true
      this.resetTransferForm()
      this.transferForm.customIds = this.ids
    },
    handleImport() {
      this.title = '导入'
      this.importChargeError = []
      this.showImport = true
    },
    handleExport() {
      const that = this
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出当前店铺数据?', "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        that.loading = true
        return exportExcel(queryParams);
      }).then(response => {
        that.loading = false
        this.download(response.msg);
      }).catch(err=>{
        that.loading = false
      })
    },
    handleEdit(row) {
      getCustomInfo(row.id).then(response => {
        this.customForm = response.data
        this.showEditCustomDialog = true
      })
    },
    // 关闭创建客户弹窗
    closeAddCustomDialog(value) {
      this.showAddCustomDialog = false
      if(value) {
        this.getList()
      }
    },
    resetShopForm() {
      this.shopForm.id = ''
      this.shopForm.customId = ''
      this.shopForm.name = ''
      this.shopForm.shopUrl = ''
      this.shopForm.account = ''
      this.shopForm.password = ''
      this.shopForm.wechatGroup = ''
      this.shopForm.operator = ''
      this.shopForm.operators = new Array()
      this.resetForm('shopForm')
    },
    resetAssignForm(){
      this.assignForm.id = ''
      this.assignForm.customId = ''
      this.assignForm.operators = []
      this.resetForm('assignForm')
    },
    resetTransferForm(){
      this.transferForm.id = ''
      this.transferForm.customId = ''
      this.transferForm.operators = []
      this.resetForm('transferForm')
    },
    handleSingleDel(row) {
      this.$confirm('是否确认删除该店铺？', '提示', {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return deleteShop(row.id)
      }).then(response => {
        this.msgSuccess('店铺删除成功！')
        this.getList()
      })
    },
    handleStartServ(row){
      if(row.account === null || row.password === null || row.wechatGroup === null ||
         row.account === '' || row.password === '' || row.wechatGroup === ''){
        this.$message.warning('请先完善店铺信息！');
        return
      }

      this.title = '开始操作'
      this.showChangeStatus = true
      this.changeStatusForm.id = row.id
      this.changeStatusForm.operStartDate = currentDate()
      this.changeStatusForm.operEndDate = null
      this.changeStatusForm.operStatus = '1'
    },
    handleLostServ(row){
      this.title = '店铺流失'
      this.showChangeStatus = true
      this.changeStatusForm.id = row.id
      this.changeStatusForm.operEndDate = currentDate()
      this.changeStatusForm.operStatus = '2'
    },
    handlePauseServ(row){
      this.title = '店铺流失'
      this.showChangeStatus = true
      this.changeStatusForm.id = row.id
      this.changeStatusForm.operEndDate = currentDate()
      this.changeStatusForm.operStatus = '3'
    },
    handleDel() {

    },
    // 查询我的签约客户
    getCustomList() {
      getCustomAgreementList().then(response => {
        this.customOptions = response.data
      })
    },
    // 查询部门用户树
    selectDeptUserTree(){
      selectAllDeptUser().then(response => {
        this.userOptions = this.handleTree(response.data, "userId");
      })
    },
    // 转换菜单数据结构
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.groupName,
        children: node.children
      };
    },
    user_normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.userId,
        label: node.nickName,
        children: node.children
      }
    },
    submitForm() {
      this.$refs.shopForm.validate(valid => {
        if(valid) {
          updateCustom(this.shopForm).then(response => {
            this.$message.success('修改店铺成功！')
            this.showAddOrEditDialog = false
            this.resetShopForm()
            this.getList()
          })
        }
      })
    },
    createFormParams(){
      const params = {}
      params.id = this.shopForm.id
      params.customId = this.shopForm.customId
      params.name = this.shopForm.name
      params.shopUrl = this.shopForm.shopUrl
      params.serviceType = this.shopForm.serviceType
      params.account = this.shopForm.account
      params.password = this.shopForm.password
      params.wechatGroup = this.shopForm.wechatGroup
      params.operators = []
      if(this.shopForm.operators !== null && this.shopForm.operators.length > 0){
        this.shopForm.operators.forEach(o=>{
          params.operators.push(o[o.length - 1])
        })
      }
      return params;
    },
    cancel() {
      this.showAddOrEditDialog = false
      this.resetShopForm()
    },
    changeCustom() {
      const data = this.customOptions.find(f => f.id == this.shopForm.customId);
      if(data != null){
        this.shopForm.serviceType = data.serviceType
      }
    },
    submitAssignOperatorForm() {
      let params = {}
      params.customIds = this.assignForm.customIds
      params.operators = []
      if(this.assignForm.operators !== null && this.assignForm.operators.length > 0){
        this.assignForm.operators.forEach(o=>{
          params.operators.push(o[o.length - 1])
        })
      }else{
        this.$message.warning('请选择运营人员！')
        return
      }

      this.$refs.assignForm.validate(valid => {
        if(valid){
          this.$confirm('是否确认将店铺分配给勾选的人员？', '提示', {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function(){
            return assignOperators(params)
          }).then(response => {
            this.$message.success('分配成功！')
            this.showAssignOperator = false
            this.resetAssignForm()
            this.getList()
          })
        }
      })
    },
    cancelAssignOperatorForm() {
      this.showAssignOperator = false
      this.resetAssignForm()
    },
    submitTransferOperatorForm(){
      let params = {}
      params.customIds = this.transferForm.customIds
      params.operators = []
      if(this.transferForm.operators !== null && this.transferForm.operators.length > 0){
        this.transferForm.operators.forEach(o=>{
          params.operators.push(o[o.length - 1])
        })
      }else{
        this.$message.warning('请选择运营人员！')
        return
      }

      this.$refs.transferForm.validate(valid => {
        if(valid){
          this.$confirm('是否确认将店铺转交给勾选的人员？', '提示', {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function(){
            return transferOperators(params)
          }).then(response => {
            this.$message.success('转交成功！')
            this.showTransferOperator = false
            this.resetTransferForm()
            this.getList()
          })
        }
      })
    },
    cancelTransferOperatorForm() {
      this.showTransferOperator = false
      this.resetTransferForm()
    },
    handleImportExcel(data) {
      console.log(data)
      this.formData.append('file', data.file)
    },
    handleRemoveImportFile() {
      this.formData.delete('file')
    },
    downLoadExcel(){
      let a = document.createElement('a')
      a.href = '/店铺信息导入模板.xlsx'
      a.download = '店铺信息导入模板.xlsx'
      a.style.display = 'none'
      document.body.appendChild(a)
      a.click()
      a.remove()
    },
    // 关闭导入弹窗
    handleCloseImportWindow(){
      this.$data.showImport = false
      this.$data.formData = new FormData()
    },
    // 提交导入
    handleSubmitImportForm(){
      this.$data.importChargeError = [];
      if(!this.$data.formData.has("file")){
        this.$message.error("请选择要导入的文件");
        return;
      }
      if (!(this.$data.formData.get("file").type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
        this.$data.formData.get("file").type == 'application/vnd.ms-excel')) {
        this.$message.error('上传文件只能是xlsx和xls格式的文件！')
        return
      }
      const isMax = this.$data.formData.get("file").size  >= 20971520
      if (isMax) {
        this.$message.error('上传文件大小不能超过 20MB!')
        return;
      }
      const loading = this.$loading({
        lock: true,
        text: '正在导入报考信息...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      importExcel(this.formData).then(response => {
        if(loading) loading.close()

        if (response.msg == 1 || response.msg == '操作成功'){
          this.msgSuccess('导入成功')
          this.formData = new FormData()
          this.showImport = false
          this.getList()
        }else{
          if (response.data != null && response.data.errMsg != null) {
            response.data.errMsg.forEach(item => {
              this.importChargeError.push(item)
            })
            this.formData.delete('file')
            this.importFileList = []
          }
        }
      }).catch(e => {
        if(loading) loading.close()
        this.formData.delete('file')
        this.importFileList = []
        this.importChargeError = []
      })
    },
    // 提交更改店铺状态表单
    submitChangeStatusForm(){
      if(this.title === '开始操作'){
        if(this.changeStatusForm.operStartDate === undefined || this.changeStatusForm.operStartDate === null || this.changeStatusForm.operStartDate === ''){
          this.$message.warning('请选择开始操作日期！')
          return
        }

        const that = this
        this.$confirm('是否确认开始操作该店铺？', '提示', {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return updateCustomOperStatus(that.changeStatusForm)
        }).then(response => {
          this.showChangeStatus = false
          this.resetChangeStatusForm()
          this.msgSuccess('店铺已开始操作！')
          this.getList()
        })
      }
      else if(this.title === '店铺流失'){
        if(this.changeStatusForm.operEndDate === undefined || this.changeStatusForm.operEndDate === null || this.changeStatusForm.operEndDate === ''){
          this.$message.warning('请选择店铺流失日期！')
          return
        }

        let that = this
        this.$confirm('是否确认该店铺已流失？', '提示', {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return updateCustomOperStatus(that.changeStatusForm)
        }).then(response => {
          this.showChangeStatus = false
          this.resetChangeStatusForm()
          this.msgSuccess('店铺已标记为流失！')
          this.getList()
        })
      }
      else if(this.title === '店铺暂停'){
        if(this.changeStatusForm.operEndDate === undefined || this.changeStatusForm.operEndDate === null || this.changeStatusForm.operEndDate === ''){
          this.$message.warning('请选择店铺暂停日期！')
          return
        }

        const that = this
        this.$confirm('是否确认暂停该店铺的操作？', '提示', {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return updateCustomOperStatus(that.changeStatusForm)
        }).then(response => {
          this.showChangeStatus = false
          this.resetChangeStatusForm()
          this.msgSuccess('店铺已暂停操作！')
          this.getList()
        })
      }
    },
    cancelChangeStatusForm(){
      this.showChangeStatus = false
      this.resetChangeStatusForm()
    },
    resetChangeStatusForm(){
      this.changeStatusForm.id = ''
      this.changeStatusForm.startDate = undefined
      this.changeStatusForm.endDate = undefined
      this.changeStatusForm.operStatus = ''
      this.resetForm('changeStatusForm')
    },
    showPwd2() {
      if(this.passwordInputType === 'password'){
        this.passwordInputType = 'text'
      }else{
        this.passwordInputType = 'password'
      }
    }
  }
}
</script>

<style>
.el-icon-eye-close{
  background-image: url("../../assets/image/view.png");
}
.el-icon-eye-open{
  background-image: url('../../assets/image/view_off.png');
}
</style>
